<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
	</head>
	<style type="text/css">
		body,
		ul,
		p,
		h3 {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		
		body {
			background-color: #f8f8f8;
		}
		
		img {
			border: 0;
			vertical-align: middle;
		}
		
		.fLeft {
			float: left;
		}
		
		.fRight {
			float: right;
		}
		
		header {
			padding-top: 20px;
			height: 64px !important;
			z-index: 1000 !important;
		}
		
		header.mui-bar-nav {
			background-color: #f35d58;
			webkit-box-shadow: none;
			box-shadow: none;
		}
		
		header .mui-title {
			color: #fff;
			font-size: 17px;
		}
		
		.mui-action-back {
			color: #fff;
		}
		
		.mui-icon-plusempty {
			color: #fff;
			font-size: 30px !important;
			padding-top: 6px !important;
			padding-bottom: 6px !important;
		}
		
		header .mess {
			float: right;
			padding-top: 10px;
		}
		
		header .mess {
			margin-left: 16px;
		}
		
		header .mess img {
			width: 24px;
		}
		
		section {
			padding-top: 64px;
		}
		
		#index-scroll {
			top: 64px;
			bottom: 48px;
		}
		
		.pay-ico,
		.shop-style {
			display: inline-block;
			vertical-align: middle;
		}
		
		.shop-style p:first-child {
			font-size: 15px;
			color: #333333;
			margin-bottom: 2px;
		}
		
		.shop-style {
			padding-top: 5px;
			margin-left: 10px;
		}
		
		.shop-style p:last-child {
			font-size: 13px;
			color: #666666;
		}
		
		.pay-btn {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			/*z-index: -1;*/
		}
		
		.pay-btn a {
			display: block;
			text-align: center;
			height: 48px;
			line-height: 48px;
			font-size: 18px;
			color: #fff;
			background-color: #ea4645;
		}
		
		input {
			width: calc(100% - 100px) !important;
			margin-bottom: 0 !important;
			height: 23px !important;
			border: 0 !important;
			padding: 0 15px 0 0 !important;
			font-size: 15px;
		}
		
		.pull-mess input {
			width: 100px !important;
		}
		
		.pay-ico {
			width: 48px;
		}
		
		.pay-ico img {
			width: 100%;
		}
		
		.mui-navigate-right {
			padding: 11px 15px !important;
		}
		
		.mui-navigate-right.mui-active {
			background-color: transparent !important;
		}
		
		.bank-info .mui-table-view-cell {
			padding: 17px 15px;
		}
		
		.bank-info .mui-table-view-cell span,
		.bank-info .mui-table-view-cell input {
			display: inline-block;
			vertical-align: middle;
			font-size: 15px;
			color: #000;
		}
		
		.mui-table-view-cell.mui-active {
			background-color: transparent;
		}
		
		.bank-info .mui-table-view-cell span {
			width: 85px;
			font-size: 16px;
			color: #333333;
		}
		
		.bank-info .mui-table-view-cell p {
			width: 110px;
			text-align: center;
			font-size: 13px;
			color: #333333;
			border: 1px solid #ea4645;
			border-radius: 3px;
		}
		
		.mui-navigate-right:after {
			content: '\e581';
			font-size: 25px;
		}
		#sel_city.active {
			color: #000;
		}
		#sel_city {
			color: #b8b8b8;
		}
	</style>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">新增地址</h1>
		</header>
		<section id="app">
			<div class="mui-scroll-wrapper" id="index-scroll">
				<div class="mui-scroll">
					<!-- 支付列表 -->
					<div class="shop-list-box pay-list-box">
						<!-- 信息列表 -->
						<div class="bank-info">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									<span>收货人</span>
									<input v-model="name" type="text" name="user" placeholder="收货人姓名" />
								</li>
								<li class="mui-table-view-cell">
									<span>联系方式</span>
									<input v-model="mobile" type="text" name="car_id" placeholder="联系方式" />
								</li>
								<li class="mui-table-view-cell">
									<a href="javascript: void(0);" class="mui-navigate-right">
										<span>地区</span>
										<span id="sel_city">选择地区</span>
										<!--<input id="sel_city" type="text" name="phone" placeholder="选择地区" disabled=""/>-->
									</a>
								</li>
								<!--<li class="mui-table-view-cell">
							    	<a href="javascript: void(0);" class="mui-navigate-right">
							    		<span>街道</span>
							    		<input id="showUserPicker" type="text" name="phone" placeholder="选择地区" readonly />
							    	</a>
							    </li>-->
								<li class="mui-table-view-cell">
									<span>详细地址</span>
									<input v-model="address" type="text" name="car_id" placeholder="详细地址" />
								</li>
								<li class="mui-table-view-cell">
									<span>邮政编码</span>
									<input v-model="zipcode" type="text" maxlength="6" placeholder="邮政编码" />
								</li>
								<li class="mui-table-view-cell">
									<span>设为默认</span>
									<div class="mui-switch mui-switch-mini mui-active">
										<div class="mui-switch-handle"></div>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!--支付按钮-->
		<div class="pay-btn">
			<a href="javascript: void(0);">保存</a>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/vue.js"></script>
		<script src="../../js/vue-resource.min.js"></script>
		<script type="text/javascript">
			mui.init({
				beforeback: function() {
					//获得列表界面的webview
					if(codeAddress){
						var list = plus.webview.getWebviewById('my-choose-address.html')
					}else {
						var list = plus.webview.getWebviewById('my-address.html')
					}
					//触发列表界面的自定义事件（refresh）,从而进行数据刷新
					mui.fire(list, 'refresh');
					//返回true，继续页面关闭逻辑
					return true;
				}
			})
			
			mui.plusReady(function(){
				var tokenVal = plus.storage.getItem("token");
		    	Vue.http.headers.common['token'] = tokenVal;
	//			Vue.http.headers.common['token'] = 'ceed60676016d8fe1f6bff4d26b5cede';
				var self = plus.webview.currentWebview();
				codeAddress = self.codeAddress;
			})

			
			var vm = new Vue({
				el: "#app",
				data: {
					doMain: 'http://zhapi.zmj580.cn',
					name: '',
					mobile: '',
					district_id: '',
					address: '',
					zipcode: '',
					isDefault: 1,
				},
				updated: function(){
					jQuery('.no-address,.add-address').addClass('active')
				},
				methods: {
					setAddress: function(){
						plus.nativeUI.showWaiting( "正在提交..." );
						var _this = this;
						var url = _this.doMain + '/api.php?method=member.address.add';
						if(_this.zipcode == ''){
							_this.zipcode = '000000'
						}
						console.log(_this.name,_this.mobile,_this.district_id,_this.address,_this.isDefault)
						this.$http.post(url,{
							name: _this.name,
							mobile: _this.mobile,
							district_id: _this.district_id,
							address: _this.address,
							zipcode: _this.zipcode,
							default: _this.isDefault
						},{emulateJSON: true}).then(function(res) {
							console.log(res.data);
							plus.nativeUI.closeWaiting();
							if(res.data.result) {
								mui.alert('地址添加成功！',function(){
									mui.back();
								});
							}else{
								mui.alert(res.data.msg);
							}
						}, function(res) {
							alert(res.info);
						})
					},
				}
			});
			

			mui('#index-scroll').scroll({
				scrollY: true, //是否竖向滚动
				scrollX: false, //是否横向滚动
				startX: 0, //初始化时滚动至x
				startY: 0, //初始化时滚动至y
				indicators: true, //是否显示滚动条
				deceleration: 0.0003, //阻尼系数,系数越小滑动越灵敏
				bounce: true //是否启用回弹
			});

			var height = jQuery(window).height();
			jQuery(window).resize(function() {
				if(jQuery(window).height() < height) {
					jQuery('.pay-btn').css('display', 'none');
				} else {
					jQuery('.pay-btn').css('display', 'block')
				}
			})

			
			document.querySelector('.mui-switch').addEventListener('toggle', function(event) {
				//event.detail.isActive 可直接获取当前状态
				//this.parentNode.querySelector('span').innerText = '状态：' + (event.detail.isActive ? 'true' : 'false');
				//					alert(event.detail.isActive)
				if(event.detail.isActive) {
					console.log('已开启消息推送');
					vm.isDefault = 1
				} else {
					console.log('已关闭消息推送');
					vm.isDefault = 0
				}
			});
			
			mui('body').on('tap','.pay-btn',function(){
				vm.setAddress();
			});
			
		</script>
	</body>

</html>